<template>
    <div id="myFunc">
        <div id="top">
          <p>我的功能</p>
      </div>
      <div id="main">
          <ul id="nav">
            <li>
                <router-link to="/" class="flex">
                <div>
                    <span class="iconfont icon-shouye"></span>
                    <span>{{num}}张优惠券</span>
                </div>
                </router-link>
            </li>
            <li>
                <router-link to="/item" class="flex">
                <div>
                    <span class="iconfont icon-leimupinleifenleileibie"></span>
                    <span>我的收藏</span>
                </div>
                </router-link>
            </li>

            <li>
                <router-link to="/exercise" class="flex">
                <div>
                    <span class="iconfont icon-huodong big"></span>
                    <span>浏览记录</span>
                </div>
                </router-link>
            </li>

            <li>
                <router-link to="/shop" class="flex">
                <div>
                    <span class="iconfont cart_empty icon-icon-test"></span>
                    <span>地址管理</span>
                </div>
                </router-link>
            </li>
            </ul>
      </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        num: 8,
      }
      },
      methods: {

      },
}
</script>
<style lang="less">
    #myFunc{
        width: 92%;
        height: 3.75rem;
        margin: 1.4rem auto;
        background-color: white;
        border-radius: .4rem;
          #top{
            background: white;
            height: 1.2rem;
            border-radius:.4rem .4rem 0 0 ;
            border-bottom: 1px solid grey;
            p{
                display: inline-block;
                font-size: .5rem;
                font-weight: bold;
                line-height: 1.3rem;
                padding-left: .3rem;

            }
            span{
                font-size: .4rem;
                line-height: 1.3rem;
                float:right;
                margin-right:.3rem ;
            }
           
        }
       #main {
            a {
                text-decoration: none;
                color: black;
            }
            .router-link-active {
                //color: orangered;
            }
            #nav {
                display: flex;
                width: 100%;
                height: 2rem;
                margin: .2rem auto;
                bottom: 0;
                left: 0;
            }
            li {
                display: flex;
                flex: 1;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                .flex {
                display: flex;
                div {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    span{
                        padding: .05rem   ;
                    }
                    .iconfont{
                        font-size: .8rem;
                    }
                }
                }
            }
            }
    }

</style>